(Hyper Text Markup Language

)

HTML

TERMS TO KNOW BEFORE STARTING HTML: 
Internet  Web page  Websites  Web server  Web browser  Markup Language  HyperText Markup Language (HTML)

INTERNET:
Called the 'information superhighway' and the 'network of networks,' it is basically a means of connecting a computer to any other computer anywhere in the world. When two computers are connected over the Internet, they can send and receive all kinds of information such as text, graphics, voice, video, and computer programs.

 THE WEB PAGE:
Each web page (also known as webpage) represents various types of information presented to the visitor in readable manner. 

A WEBSITE :
A Website is a collection of documents known as webpages The main page in a website is called a homepage, and other pages in a website are called subpages. These are connected by hyperlinks, 

A WEB BROWSER :
A Web Browser is a software application for retrieving, presenting, and traversing various kinds of information on the internet , such as web sites, video, audio, etc . Most Internet users are using Internet Explorer because it's easy to use and most Web sites are written with Internet Explorer in mind, meaning that they are compatible. 

A WEB SERVER :
Webpages are stored on a server, which is a network of computers designed to store websites. A web server is what makes it possible to be able to access content like web pages, or other data from anywhere as long as it is connected to the internet.

MARKUP LANGUAGE: 
Webpages are written in a language called Markup Language . HTML tells web browsers what information to display and how to format it.  A markup language is a combination of words and symbols which give instructions on how a document should appear.  The most widely known markup language today is likely hypertext markup language (HTML). This is the language used by web browsers to display websites.

): Markup languages are designed for the processing.MARKUP LANGUAGE (continue. HTML is a an example of a widely known and used markup language. within a text file.. both the layout and style. The language specifies code for formatting. The code used to specify the formatting are called tags. . definition and presentation of text.

Words To Know: HTML Tag :  Tags are elements of the HTML document used to specify how the document should be displayed by the browser. and an attribute customizes or modifies HTML elements. .  An HTML element starts with a start tag / opening <tag> An HTML element ends with an end tag / closing </tag>. Attribute :  Used to modify the value of the HTML element. Elements will often have multiple attributes. For now just know that a tag is a command the web browser interprets.  The element content is everything between the start and the end tag. Tags look like this: <tag> Elements:  Tags are also called element. an element is a complete tag. .

HTML:  Markup language Used to format text and information  HTML Marked up with elements. delineated by tags Tags: keywords contained in pairs of angle brackets  HTML tags Not case sensitive Good practice to keep all the letters in one case  Forgetting to close tags is a syntax error .

html extensions Name your files to describe their functionality File name of your home page should be index.html  Errors in HTML Usually not fatal .htm or .Editing HTML  HTML files or documents Written in source-code form using text editor Notepad: Start-Programs-Accessories  HTML files .

FIRST PROGRAM: <html> <head> </head> <body> </body> </html> .

links. blank line before and after . link colors and font faces P element forms a paragraph. etc. forms. Elements include backgrounds. images.Common Tags  Always include the <HTML> </HTML> tags  HTML documents HEAD section ‚ Information about the document ‚ Information in header not generally rendered in display window ‚ TITLE element names your Web page BODY section ‚ ‚ ‚ ‚ Page content Includes text.

<Head> Section: <html> <head> <title>My First HTML Document</title> </head> <body> </body> </html> .

h4. blank line before and after.h5.h3. Actual size of text of header element is selected by browser Can vary significantly between browsers  CENTER element Centers material horizontally Most elements are left adjusted by default .h6).h2.<BODY> Section:  Paragraphs: HTML documents are divided into paragraphs.  Headings Simple form of text formatting Vary text size based on the header s level (h1. <P> tag forms a paragraph.

<BODY> Section: <html> <head> <title>My First HTML Document</title> </head> <body> <h1> Hello World!!!</h1> <p> This is my first WEB PAGE</p> </body> </html> .

..Levels of Heading tag:  <h1> . </ h5>  <h6 > . </ h2>  <h3 > . </ h4>  <h5 >.. </ h3>  <h4 > .... </h1>  <h2 > . </ h6> .

<html> <head> <title>My First HTML Document</title> </head> <body> <center> <h1> Level 1 Header </h1> <h2 > Level 2 Header </ h2> <h3 > Level 3 Header </ h3> <h4 > Level 4Header </ h4> <h5 > Level 5 Header </ h5> <h6 > Level 6 Header </ h6> </center> </body> </html> .

Header elements H1 through H6 .

Text Styling  Underline style <U> </U>  Align elements with ALIGN attribute right. left or center  Close nested tags in the reverse order from which they were opened  Emphasis (italics) style <EM> </EM>  Strong (bold) style <STRONG> </STRONG>  <B> and <I> tags deprecated .

Stylizing text on Web pages .

Example: <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> </body> </html> .

HTML Text Formatting Tags Tag <b> </b> <big> </big> <em> </em> <i> </i> <small> </small> <strong> </strong> <sub> </sub> <sup> </sup> <ins> </ins> <del> </del> Description bold text big text.(causes the size of text to be increased by one font size. ) emphasized text italic text small text(causes the size of text to be decreased by one font size) strong text subscripted text superscripted text inserted text deleted text .

Example: <html> <body> <p><big>This text is big</big></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> </p> <p>This is<sup>superscript</sup></p> <p>This is<del>deleted</del></p> <p>This is<del>deleted</del> but <ins> insert </ins> is used</p> </body> </html> .

The general syntax is as follows: <tag attribute 1 = "value" attribute 2 = "value" .Attributes of Tags:  Attributes are the properties of tag..  Attributes give certain characteristics to a tag (e.g.. > </tag> .  Attribute values should always be enclosed in quotes.  Attributes are always specified in the start tag. etc. color. height. width..

This is a comment --> . Comments are ignored by the browser and are not displayed.HTML Comments  Comments can be inserted into the HTML code to make it more readable and understandable.  Comments are written like this: <!-.

BODY TAG AND ITS ATTRIBUTES .

‡ To generate a wider range of colors. vary the intensity of red. magenta & cyan. green.red. .Playing with colors ‡ The RGB color model produces color using combinations of the three primary colors. green & blue. we can generate a trio of complementary colors: yellow. ‡ By adding only two of the three primary colors. blue.

they are mentioned in hexadecimal format where the hexadecimal color code is preceded by a number sign (#). ‡ Mostly.Playing with colors ‡ In RGB model. . the intensity value of each component range from 0 (absence of color)to 255(highest intensity).

you can specify the color by a color name. ‡ There are 16 color names which are widely understood & interpreted by most of the browsers. . ‡ It is recommended to avoid using color names since not all browsers understand them.Playing with colors ‡ Sometimes. It¶s much safer to specify colors using the RGB code.

255.0"> hex_number Specifies the text-color with a hex code rgb_number Specifies the text-color with an rgb code .Changing the color of text ‡ TEXT attribute of the <BODY> tag is used to set the foreground. <BODY TEXT=³value´> color_name Specifies the text-color with a color name <BODY TEXT= blue > <BODY TEXT= #FF0000 > <BODY TEXT="0. or text color of the page.

Changing the color of background ‡ BGCOLOR attribute of the <BODY> tag is used to specify a background color for an HTML document.0"> hex_number Specifies the background-color with a hex code rgb_number Specifies the background-color with an rgb code . <BODY BGCOLOR=³value´> color_name Specifies the background-color with a color name <BODY BGCOLOR= cyan > <BODY BGCOLOR="#FFFF00"> <BODY BGCOLOR="0.0.

Using image as background <BODY BACKGROUND=³value´> ‡ BACKGROUND attribute specifies a background image for an HTML document. . ‡ It overrides the BGCOLOR attribute. This means that if you specify both a background image & a background color. the background image will appear on top of the background color.

CONTROLLING FONT SIZE & COLOR .

Using the FONT tag ‡ <FONT> tag lets you specify how you want your font formatted on the Webpage. . Attribute FACE SIZE COLOR Description Specifies the type of font you want. Sets the color of text. Sets the size of text. ‡ <FONT> tag overrides the text color define in the body tag.

Using the FONT tag: FACE attribute ‡ Used to specify the font to be used. ‡ The font that you specify must be present on the user s computer. ‡ The default font face is Times New Roman <BODY> <FONT FACE=³Algerian´> I am enjoying HTML classes! </FONT> </BODY> .

"georgia". "arial".e. "comic sans ms" and many more. i. it doesn´t matter whether you type "Arial" or "arial". "bookman old style". As value for the FACE attribute you can use any specific font name such as "verdana". .  The font face values are case-insensitive.

if the first choice is not available.Multiple Faces : ‡ What if the user doesn t have the font that we have specified? ‡ Specify more than one fonts. The other fonts are used as alternatives. <BODY> <FONT FACE=³Nadia . Algerian . ‡ Each font face is separated by commas. SansSerif´> Using multiple choices in FONT tag </FONT> </BODY> .

or RGB color value.Using the FONT tag: COLOR attribute It simply sets the color of the text either by providing color name. <BODY> <FONT COLOR=³RED´> I am enjoying my HTML classes! </FONT> </BODY> 37 . or its hexadecimal code.

Using the FONT tag: SIZE attribute HTML specifies text using point. ‡ ‡ ‡ ‡ <BODY> <FONT SIZE=³5´> This text is of size 5 </FONT> </BODY> . where X is any integer value & will add up to the default size. SIZE =+X. Similarly. you can use SIZE=-X ‡ It is strange that HTML heading levels have 6 integral levels.g. Smallest size is 1 & largest size is 7. SIZE=+3 will display a size of 6. Default size is 3.e. For e. while FONT SIZE has 7. It can also be set relative to default size i.

They are used simply as markers. For Example : <br/> and </hr> . EMPTY elements are not permitted to have an endtag. They are closed in start tag.  A very few elements are declared as EMPTY. This means three things: They do not contain any text.Empty HTML Elements  HTML elements with no content are called empty elements.

Specifies the width of a hr element. 5. The hr element can be used to separate content in an HTML page. Align Noshade Size Width Color : : : : : left. 4.  Horizontal rule <HR> tag <hr/> tag is used to display a horizontal line directly below it. set the line to a solid line. . 2. 3.. right.Empty HTML Elements(contd. HR attributes: 1. Specifies the height of a hr element.)  Line break  <br/> tag is used for line break(a new line). center. Sets the color of the line.

</p> </body> </html> .Example: <html> <body> <p> This is line 1. <br/> This is line 2.

Example of Horizontal Line: .

Understanding paths ‡ There are two types of pathnames: 1. what folders a file is in).e. ‡ Absolute: specifies the fully specified location. 2. . Relative Absolute. they describe where a file is in relation the current location (where the file is from here). ‡ Relative: rather than specifying the exact location (i.

.html using colors.jpg For Lesson2.html using nature.jpg: <BODY BACKGROUND="colors.jpg"> Lesson1.jpg: <BODY BACKGROUND=".jp g For Lesson3. html Colors.jpg: <BODY BACKGROUND="images/nature.html using stars.h tml Lesson 2.Example of Relative Path: C:\ For Lesson1.jpg"> Backgrou nd lesson Stars.html Lesson 3.jpg images Nature./stars.jpg"> .

The browser won't be able to find the image file. It will no longer be located in the same relative position.  It won't work if you relocate your image or HTML files into different folders or change your folder structure. Easy to type in the path. . It works on your local pc and on your web site (assuming you have the same folder structure in both places).

MyWebPages and MyImages.mysite. This is because you tell the browser exactly where the file is on the web.  then the absolute path will be: <body background= http://www.  Let's say your web site is named "www.com" and you have two folders set up as we talked about earlier.Example of absolute path:  Absolute paths are a different than Relative paths in that it doesn't matter where the image files are located relative to your web pages.jpg > .mysite.com/MyImages/flower.

 It doesn't matter where you move your HTML file. http://www..g. C:\folder1\folder2. Some people use a local file path (e.  If working with files on your computer you won't see the images unless you have a "live" internet connection (you're connected to the internet).. Unless you move the image file of course.) to get things to work on their local computer but forget to change this to the actual URL before uploading their page (e.g.). it will find your image file.. This is because the browser won't be able to get to the image. .com/folder1/folder2/.mysite..

LINKING DOCUMENTS USING ANCHOR TAG .

</a> .  Links inserted using the <a> (anchor) element  <a> tag requires href attribute  HREF specifies the URL you would like to link to  <a href = address >  Types of linking: 1. the arrow will turn into a little hand. Internal Linking 2.HTML Hyperlinks (Links)  When you move the cursor over a link in a Web page. External Linking .

External Linking ‡ Linking to other Web pages ‡ It is essential to provide http:// <A HREF=³http://www.com´ > Go to Yahoo! </A> .yahoo.2.

html³ > lesson 3</A> .1. Internal Linking ‡ In HREF attribute. specify the relative path of the document to which you want to link. This link will take you to lesson 3 which is in the same directory <A HREF="lesson3.

html is located in the current directory.  <a href="tips/other/page.  <a href=".html is located in a folder called other that is located in a folder called tips that is located in the current directory.  <a href="./page..html"> page. The "tips" folder is located in the current directory. ..html"> page..html"> page./.html is located in a folder two levels up from the current directory.html is located in a folder (directory) called tips./page.html"> page.html is located in a folder one level up from the current directory.html"> page.  <a href="tips/page.What if the page isn't in the same directory?  <a href="page.

. NAME Allows links to be able to point to a specific section within a document (instead of links always taking to the top of a document).Attributes of <a> tag: Attribute HREF TITLE Description Specifies the destination of a link. ‡In most browsers it will pop up when you hover over the link. ‡Provides information about where the link will send the user.

Provide the anchor point then: <A HREF=³#LOCATION_NAME´> Mark the location by using: <A NAME=³LOCATION_NAME´> . ‡ NAME attribute labels a section of an HTML document with a specific reference name. use the NAME attribute.Linking to a particular position in a document ‡ For this purpose.

com´>«</a> .E-MAIL Link  <a> tag can be used to link email addresses. using href attribute. <a href = ³mailto:abcd@hotmail. <a href = ³mailto:emailaddress´> </a>  Mailto works ONLY if the visitor has configured an email client (such as Outlook Express) on their system.

_self 4. _parent 3.Using target attribute:  target Specifies where to open the linked document: 1. _top . _blank 2.

links will appear as follows in all browsers: ‡An unvisited link is underlined and blue ‡A visited link is underlined and purple ‡An active link is underlined and red The default color can be over-ridden by using the following attributes in the <BODY> tag. Changes the default color of hyperlink that is already visited. Attribute LINK ALINK VLINK Description Changes the default color of a hyperlink.Changing link colors: ‡By default. . Changes the default color of hyperlink that is activated.

 Pixel Stands for picture element Each pixel represents one addressable dot of color on the screen .

Sign up to vote on this title
UsefulNot useful