Defining HTML

HTML:HTML is a subset of a larger markup language called SGMLHTML stands for HyperText Markup Language. This markup language is used to create web documents. A web document is viewed in a web browser. HTML (HyperText Markup Language) is the language of the World Wide Web. It is a descriptive language that utilizes a limited number of predefined markup tags to describe how a web browser should display a web page.

Defining HTMLCont..Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear - that is, they had a specific order. But with a "hyper" language such as HTML, the user can go anywhere on the web page at any time. Text is just what you're looking at now - English characters used to make up ordinary words. Mark-up is what is done to the text to change its appearance. For instance, "marking up" your text with before it and after it will put that text in bold. Language is just that. HTML is the language that computers read in order to understand web pagesCont..Browser: A browser is a software application that allows you to view HTML documents, whether Web pages or HTML files, on your own computer. Two popular browsers are Internet Explorer and Netscape Navigator.Website A Web site stores information that has been organized into individual hypermedia documents, Web pages, and holds it on a server for distribution across the Internet.

HypermediaA hypermedia document is a document with a format that can be displayed online, in a browser. In practice, hypermedia documents are often called HTML files, although they may contain many other types of files.HTML standards are set and maintained by the World Wide Web Consortium

WWW(World Wide Web) The Web, or World Wide Web, is the area of the Internet that allow you to display text and graphics and play videos, and movies. With appropriate equipment, we can even receive or broadcast live audio and video. A set of html pages accessible using HTTP Hyper Text Transfer Protocal- HTTP is the protocol to exchange or transfer hypertext. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. Hyperlink:A hyperlink, or link, usually appears as colored, underlined text or a graphic on a Web page. A link is a jumping-off point for moving from one subject to another.

Cont..HTML Web page authors require three basic tools: Computer with graphics capabilities Text editor Browser software application

Text editor:A text editor is a software application used to create and manipulate text, such as Notepad and WordPad.

HTML editorsText based editorsWYSIWYG editors

Text-based (or code-based) editors

To start creating web pages, we do not need an expensive software package but you do need some knowledge of HTML. We can create web pages with a basic text editor like Windows Notepad.In Windows, Notepad can be started from the Start Menu:Select: Programs | Accessories | NotepadMacromedia Homesite is a popular text-based HTML editor.

WYSIWYG editors

Because WYSIWYG (pronounced wuzzywig or wizzywig) HTML editors do not require much HTML knowledge, they tend to be expensive. These editors allows you to directly work in the "design" or "preview" view instead of the code view. There are several popular WYSIWYG editors available:Macromedia DreamweaverMicrosoft FrontPageAdobe GoLive

Text-based (or code-based) editorsBetter control. Because text-based editors require knowledge of HTML, the developer has more control over what is written to produce a web page. In some cases, a software package (like FrontPage) may write proprietary code that may not be interpreted by all the brwosers.Faster editing. we can quickly change your code unlike WYSIWYG editors. WYSIWYG editors require, for example, a lot of computer-resources to start-up or load/open a page.More flexibility. we can edit your code directly at the desired location. This cannot be always done with WYSIWYG editors.

WYSIWYG editors

Support for other scripting languages. WYSIWYG editors provide advanced features to code in other programming/scripting languages such as JavaScript, XHTML, ASP/ASP.NET, PHP, and JSP.Faster/simplified development. WYSIWYG editors allows you to develop pages quickly as the software writes the necessary code in response to the layout you design for your web page.Better organization. Dreamweaver, for instance, allows you to define a site folder that contains all the files that make up the website. By defining a local site folder, you have many advantages including moving of files (without breaking links), searching of a particular term or tag in the entire site (without having the file open!), and FTP support to move only changed or new files to the server. Creating an HTML document

An HTML document has two elements:Document ContentTagsDocument content is the information on a web page that the user will see. That information could be text or graphics, for example. As you start creating your own web pages, try finding out first what information you want to display and how you want to present it.Tags are the HTML codes that control how the document content will appear. The tags, in other words, will determine whether the text will be bold, black or blue, or of font type Time New Roman or AiralNaming conventionsHTML files names are very important as they are used to locate or open the files.Save your web page files with the .htm or .html file extension. Some web servers are case-sensitive. Filenames should consists only of letters and numbers. Avoid using spaces, punctuation, or special characters.

13Basic structure of an HTML document

An HTML document has two main parts:head. The head element contains title and meta data of a web document.body. The body element contains the information that we want to display on a web page.

Understanding elements

To markup your web pages, we will need to learn the syntax (rules of a computing language) of HTML. the syntax only controls the presentation or structure of a web page. The most fundamental piece of building block of HTML is the elements.In HTML, an element refers to two different things:element of structure of a document (for example, paragraph, web page title, etc.).element in the sense of a tag (for example, , )

Cont..TagStart TagAn End TagEmpty Tags(no Content)One-sided Tags. Two-sided Tag.Cont..Every element has a name such as head, title, p, i, and b.A tag is the element name surrounded by the angled brackets. This refers to a start tag such as , , and . A start tag starts a particular HTML instruction.An end tag is the same as a start tag except the end tag has a forward slash between the < and the element name. An end tag stops a particular HTML instruction.Most elements have content, which is placed between the start and the end tags. Example, this is bold.Some elements have no content. Such elements/tags are known as empty tags.Some elements have no end tags. These are referred to as one-sided tags. A tag that has an opening and closing tag is referred to as two-sided tag.Understanding attributesIn HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags.An attribute has two parts: attribute name and attribute value. . Ex: align="rightcommentsIn HTML, a comment begins with .Example of a single line comment: Example of a multi-line comment:-->.Spacing and breaksbreaks between tagsspacing between tagsSpacing inside the bracketsAvoiding unnecessary space in HTML codebreaks between tagsspacing between tagsAvoiding unnecessary space in HTML codeThere are two areas where the use of space should be avoided:space between the tag name and bracketsspace between the tag name and the text it affectsSpace between the tag name and bracketsSpace between the tag name and the text it affectsCreating a paragraphIn HTML, creating a paragraph is simple as entering text. To create a paragraph, move the cursor to the location where you want the paragraph in the HTML editor you are using. Next, type the tag to begin the paragraph. close the tag with . Closing the tag instructs the browser that the paragraph has ended.Attributes:Align=left, right, center,justifyExample.. Paragraph example ONE TWO THREE This paragraph uses the justify alignment. The paragraph is justified: the text continues to both margins. exampleHow To Create ParagraphTo learn HTML and other web programming languages, come to ScriptingMaster.com regularly. The web site is updated daily with new content. The web site is succeeding because visitors like you keep coming back and find the site simple to use, easy to understand, and resourceful.Creating headingsHeadings are defined with the to tags. defines the largest heading while defines the smallest HTML automatically adds an extra blank line before and after a heading. Line breaksTo add a line break in a web page, you can use the
tag. Typing a
tag in your HTML code is similar to pressing the ENTER or RETURN key in a word processor. The effect of
tag is that the browser stops printing text on that line and drops down to the next line on that page. The
tag does not require a closing tag. examplePreformat textWith the tag, the text renders in the browser exactly as you type it. The tag is short for preformat. So if you press the ENTER or RETURN key several times to create line breaks within a tag, you can expect to see all those line breaks in a browser.The following shows the tag in use:Syntax: -------- --------Cont..Horizontal rulesTo break up an HTML document into separate sections, you can insert a horizontal line (rule). A horizontal rule is inserted by the tag. The tag is one-sided, meaning it does not require a closing tag. Inserting horizontal linesCont..Horizontal rule of size 12:Horizontal rule of size 12 and width 20%:Horizontal rule of size 12, width 60%, and aligned left:Output isDivisions (with the tag)To structure HTML documents into divisions or sections, the tag is used. The tag specifies a logical block without predefined meaning or rendering infomration. Orginally, the tag was mostly used to align sections of content in a document with the align attribute.example:Division headingParagraph 1. This text is right-aligned. The div affects paragraph and other block elements.Paragraph 2. This text is also right-aligned. OutputDivision headingParagraph 1. This text is right-aligned. The div affects paragraph and other block elements.Paragraph 2. This text is also right-aligned.HTML Links HTML uses the anchor tag to create a link to another document or web page. The Anchor Tag and the Href Attribute The Target AttributeEmail Links The Anchor Tag and the Name Attribute The Anchor Tag and the Href Attribute An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: Text to be displayed The tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. The Target AttributeWith the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window: Visit Email Links To create an email link, you will use mailto: plus your email address. Email Help Desk To add a subject for the email message, we would add ?subject= after the email address. For example: Email Help Desk The Anchor Tag and the Name Attribute The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the appearance of the textsyntax of a named anchor: Text to be displayed HTML Images The Image Tag and the Src AttributeThe Alt Attribute Image Dimensions The Image Tag and the Src Attribute The tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: The Alt Attribute The alt attribute is used to define an alternate text for an image. The value of the alt attribute is author-defined text: The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. Image Dimensions When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image dimensions in pixels however, the browser simply reserves a space for the image, then loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. The chef image would then be: HTML ColorsColor Values Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows the result of combining red, green, and blue:Color Names A collection of color names is supported by most browsers. Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow) Cont..HTML Backgrounds The tag has two attributes where you can specify backgrounds. The background can be a color or an image.Bgcolor Background Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: The lines above all set the background-color to black.Background The background attribute can also specify a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. Character tags:A tag that is applied to an individual character is known as a character tag. A character tag can be grouped into two categories: physical and logical. (Note: physical styles are associated with physical character tags; logical styles are associated with logical character tags.)1.Physical stylesa physical character tag controls how the characters are formatted602. Logical stylesA logical character tag describes how the text is being used, not necessarily how it is formatted.Font tagThe tag provides limited control over changing the appearance of the text. The tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed the tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements. The Tag Should NOT be used. Cont..Attributes:size,color,faceSize:size of our text with number value 1-7 onlyColor:font color,values are rgb,name,hexadecimalFace:name of the font,font typeEx:This is font example HTML Character Entities A character entity has three parts: an ampersand (&), an entity name or an entity number, and finally a semicolon (;). The & means we are beginning a special character, the ; means ending a special character and the letters in between are sort of an ab.breviation for what it's for Entities are case sensitive Cont..Non-breaking Space The most common character entity in HTML is the non-breaking space . Normally HTML will truncate spaces in your text. If you add 10 spaces in your text, HTML will remove 9 of them. To add spaces to your text, use the character entity. Example..Marquee TagThe HTML tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.Syntax:This is basic example of marqueeHTML listsLists are very important to any document as they allow you to make your key points stand out from the rest of the text. HTML supports three lists:Unordered (Bulleted) Ordered (Numbered)Definition 1.Unordered (bulleted) listThe most commonly used list is the unordered list. An unordered list can be used whenever the order of items you want to list is unimportant. HTML offers three different default characters to use with an unordered list: a bullet ( ), a circle ( ), a square ( ). Basic syntax list item 1 list item 2... Example: milk bread apples. Possible attributes1.compact:specifies that the list should render smaller than normal2.type:Specifies the kind of marker to use in the list.possible values are disc,square and circle.2.Ordered (numbered) listThe other popular kind of list is the ordered list. This type of list can be used when the order of items to list is important.An ordered list can be created with different styles: Arabic numbers, lowercase or uppercase letters, or lowercase or uppercase Roman numerals. Syntax: list item 1 list item 2... Attributes:The meanings of the values of TYPE are the following: example3.Definition listThe definition list is used far less frequently than the other two kinds of lists mentioned above. A definition list, as the name implies, is used for listing definitions:Basic syntaxterm 1definition of term 1term 2definition of term 2... Possible attributesNested listLists can be nested, meaning one list can be placed inside of another.Example:Chapter One Section One Section Two Section Three Chapter Two Chapter Three