HTML

BY ELIZABETH

INTRODUCTION
Html stands for Hyper Text Markup Language. Here you will learn how to use the basics of the Hyper Text Markup Language (HTML), so that you may make your own web pages. HTML is not a programming language, but rather a markup language. The term describes the coding language that is used to create Hyper Text documents for the world wide web and also used to control how the web pages should appear.

Contd
HTML is also used to structure information displaying certain text as headings, paragraphs, lists e.t.c. and can also be used to describe the appearance and layout of your WebPages. HTML is a combination of 2 terms: Hypertext:- This is any piece of text that works like a link. Mark-up Language:- This is a way of writing out information layout within your page.

Preparation
Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor (source document) and a web browser. Source Document:- This is any text editor that is used to key in the source code. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it. Web browser:- This is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. They include MSExplorer, Mozilla e.t.c

Contd
There is need for a web server incase you want to publish your website. Web server: This is a program that processes document requests; it also has a database, which is a repository of data and content.

Principles of Effective Web design

The principles of design are important to web design as with any other thing that is designed. With these principles you can create web pages that are put together in an effective and aesthetic way. If you learn the principles of design, you'll have web pages that look better and work towards their goals in a clear and efficient way. Here are some factors: Dont make users think : he web-page should be obvious and self-explanatory.

Contd
Manage to focus users attention: As web-sites

provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text just as the sentences marked as bold are more attractive than plain text. Strive for feature exposure: Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually arent a bad thing.

Contd
On the contrary, such

guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Contd
Make use of effective writing: As the Web is different

from print, its necessary to adjust the writing style to users preferences and browsing habits. Promotional writing wont be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored. Talk business. Avoid cute or clever names, marketinginduced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, sign up is better than start now! which is again better than explore our services.

Contd
An optimal solution for effective writing is to use short and concise phrases (come to the point as quickly as possible), use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks), use plain and objective language (a promotion doesnt need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

Contd
Strive for simplicity: The keep it simple-principle

(KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity. Ref: http://uxdesign.smashingmagazine.com/2008/01/31/10principles-of-effective-web-design http://mason.gmu.edu/~montecin/webdesign.htm

Important Concepts
Web Pages: This is a document or information

resource that is suitable for the World Wide web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links. Web site : A website, also written Web site, or simply site, is a collection of related web pages containing images, videos or other digital assets.

Contd
A website is hosted on at least one web server, accessible

via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web. Home Page : Most often refers to the initial or main web page of a web site, sometimes called the front page or start up page. Homepages contain the main information about a website. They also contain links to other parts of the website.

Contd
Web browser : This is a software application for retrieving,

presenting, and traversing information resources on the world wide web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content. Web server: can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver content that can be accessed through the Internet. The most common use of web servers is to host web sites but there are other uses like data storage or for running enterprise applications .

Contd
Uniform Resource Locator: A URL (Uniform

Resource Locator, previously Universal Resource Locator) is the unique address for a file that is accessible on the Internet. A common way to get to a Website is to enter the URL of its home page file in your Web browsers address line. However, any file within that Web site can also be specified with a URL.

Contd
World Wide Web: Also abbreviated as WWW or W3

and commonly known as the Web - is a system of interlinked hypertext documents accessed via the internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks. Hypertext: Documents containing embedded text or hyperlinks to other documents or other parts of the same document. Hypertext is text with hyperlinks.

Contd
Hyperlink: This is a reference to a document that the

reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Intranet: is the generic term for a collection of private computer networks within an organization. An intranet uses network technologies as a tool to facilitate communication between people or workgroups to improve the data sharing capability and overall knowledge base of an organization's employees.

Contd
Extranet: An extranet is a computer network that

allows controlled access from the outside for specific business or educational purposes. Extranets are extensions to, or segments of, private intranet networks that have been built in many corporations for information sharing and ecommerce. Internet: This is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of

Contd
millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail.

Contd
Tag - Used to specify ("mark-up") regions of HTML

documents for the web browser to interpret. Tags look like this: <tag> Element - A complete tag, having an opening <tag> and a 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, an element is a complete tag, and an attribute customizes or modifies HTML elements.

HTML Elements
An element in HTML is a loose term that describes each

individual piece of your web page. An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag. <p> - opening paragraph tag Element Content - paragraph words </p> - closing tag Every (web)page requires four critical elements: the html, head, title, and body elements.

Contd
BASIC STRUCTURE

<HTML>---</HTML> <HEAD>---</HEAD> <TITLE>---</TITLE> <BODY>---</BODY>

The <html> Element</html>

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document. Code: <html> </html> Now save your file by: Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.htm", without the quotes.

Contd
You must save your file by the extension .htm for it to

be save as a web page. If you opened up your index.html document, you should be starring at your very first blank (white) web page!

The <head> Element

The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here. Code: <html> <head> </head> </html>

The <title> Element

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code: <html> <head> <title>My WebPage!</title> </head> </html>

Contd
Save the file and open it in your browser. You should

see "My WebPage!" in the upper-left, as the window's title. Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.

The <body> Element

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). It encapsulate all of your webpage's viewable content. Html Code: <html> <head> <title>My WebPage!</title> </head> <body> Hello World! All my content goes here! </body> </html>

HTML TAGS
There are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two. In html, tags that include both the opening and closing tags are called the container tags. They lap around text in your document and perform some sort of formatting on the text. They hold or contain the text between the two tags. Code: <openingtag>Content</closingtag> <p>A Paragraph Tag</p>

Contd
The <title> </title>, <head> </head> are container tags with relevant information (element) given between the two tags The other tag is the Empty tag. These tags have only an opening tag. There is no closing tag. They include: <hr> Horizontal rule that draws a line across the width of your document. <br> Breaks line Sample of code:

Contd
<img src="../mypic.jpg" /> -- Image Tag <br > -- Line Break Tag <input type="text" size="12" /> -- Input Field

Display:

--Line Break- As you can see from the above image tag, your browser is completely

capable of interpreting this tag so long as we tell the browser where the image is located using the src attribute. The image or pictures should be on the same folder as your document.

Contd
Tags should be lower-case letters if you plan on

publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.

Attributes
Attributes are used to amplify tags. What we mean by amplify is that when a web browser interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes. Use several different attributes to enhance a tag. Completely customize your site through various tag/attribute combos.

Contd
Many HTML tags have a unique set of their own

attributes. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence. Attributes are placed within the opening tag and they follow a precise syntax (format).

Contd - Generic Attributes

Attributes exist to modify HTML tags allowing for complete customization of a website. Here's a table of some other attributes that are readily usable with many of HTML's tags.

Contd

Contd

Contd
Sample code:

<p>An example of <b>Bold Text</b></p> <p>An example of <em>Emphasized Text</em></p> <p>An example of <strong>Strong Text </strong> </p> <p>An example of <i>Italic Text</i></p> <p>An example of ^{superscripted Text} </p> <p>An example of _{subscripted Text}</p> <p>An example of <del>struckthrough Text</del></p> <p>An example of <code>Computer Code Text</code> </p>

Contd - Dispaly
An example of Bold Text An example of Emphasized Text An example of Strong Text An example of Italic Text An example of superscripted Text An example of subscripted Text An example of struckthrough Text An example of Computer Code Text All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.

HTML - Headings 1:6

A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.
<body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body>

Contd - Display

Contd
Notice that each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.