Starting With HTML
Chapter Focuses on :
● HTML
● History of HTML
● need for HTML
● HTML Tags
● Attributes in HTML
● Structure of an HTML document
● How to create and save an HTML document?
● Viewing an HTML document • Different Tags
HTML
HTML (Hypertext Markup Language) is a developed form of SGML (Standard Generalised Markup Language).
HTML, also known as ‘mark-up language', is used to prepare document (web page) on the World Wide Web. HTML is the most widely used language to design web contents for the internet. With the help of HTML, you can create your own website. HTML elements form the building block of HTML pages. HTML allows images and other objects to be embedded and it can be used to create interactive forms.
HISTORY OF HTML
IBM sowed the seed for HTML in the early 1980s. Initially it was known by the name called GML (General Mark-up Language). It was a powerful language that aimed at creating a document in which one could mark the title, headings, text, font selection and much more. In 1986, this concept got standardized by ISO and was renamed to SGML (Standard Generalized Mark-up Language). In 1980, physicist Tim Berners Lee and his team redesigned this language and named it as HTML (Hypertext Mark-up Language). NEED FOR HTML
We can use HTML to share information for global distribution to retrieve online information using links in commercial purposes such a making reservations, online shopping, advertising, etc. to publish one's individual document online.
HTML TAGS HTML
HTML TAGS HTML is a Tag based language. A tag is a piece of code which acts as a label that a web browser interprets. It instructs a web browser what to display and how to display. Most tags have two parts, an opening and a closing part.
For example, <html> is the opening tag and </html> is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash () character. It is interpreted as the "end" or "close” character. There are some tags that are an exception to this rule, and where a closing tag is not required. The <img> tag for showing images is one example of this. One more thing that you should keep in mind while typing tags, that is one should be particularly careful not to include extra spaces. If the browser encounters a space, it may not recognize the tag and consequently may not display the information correctly. Given below are the correct and incorrect ways of writings tags :
The correct way <TITLE> it is correct method to write tag </TITLE> The wrong way < TITLE > it is an incorrect method to write tag </TITLE> Types of Tags HTML tags that need to be closed with </> command are called container tags.
For example, <B> and </B> is a container tag and also described as a nested tag. The tags that do not need to be closed with </> command are called empty tags. For example, <br>, <hr> are the empty tags. They don't need to be closed with </> command. The difference between a container tag and an empty tag is quite simple. A container tag is the one which has to be closed and an empty tag doesn't need to be closed.
For example: CONTAINER TAG <html> is the opening tag </html> is the closing tag <a href=""> is the opening tag </a> is the closing tag
(closing is required)
EMPTY TAG
<img src="">
<br>
(no closing required) ATTRIBUTES IN HTML We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> 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 <p> 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 example shows three possible values of align attribute: left, center and
right. Example: 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. For example, while using the heading tag, the following attributes can be given: <H1 ALIGN="CENTER"> A centered heading will be displayed. </H1> STRUCTURE OF AN HTML DOCUMENT
An HTML document has two main parts:
The Head and the Body. But first every HTML document should start by declaring that it is an HTML document.
a. The HTML document starts with <HTML> tag and ends with </HTML> tag. Each document is considered to be a single page. Everything is written within these tags. If the commands are not enclosed in tags, then a web browser will assume the commands as simple text.
b. Tag <HEAD> and </HEAD> identifies the document's head area.
c. The <TITLE> has to be given within the <HEAD> tag. It contains the title of the document. The title should be short and less than 64 characters. The <TITLE> tag changes the text that appears on the top of your browser, but not in the actual viewing pane.
d. Tag <BODY> and </BODY> defines the body or contents of your web page. HOW TO CREATE AND SAVE AN HTML DOCUMENT For creating an HTML document, Notepad is used as the text editor.
Follow the steps to create and save HTML document:
Step 1 Click on Start > All Programs > Accessories > Notepad.
The Notepad window will appear.
Step 2 Type the HTML code as shown below:
SERVEI
Documents
Pictures
Music
Games
- XPS Viewer Accessories
Calculator Command Prompt Connect to a Network Projector Connect to a Projector Getting Started Math Input Panel Notepad
3 Paint Remote Desktop Connection Run Snipping Tool Sound Recorder Sticky Notes Sync Center Windows Explorer WordPad Ease of Access System Tools Tablet PC
Untitled - Notepad File Edit Format View Help
|
<HTML> <HEAD> <TITLE>MY FIRST WEB PAGE</TITLE> </HEAD> <BODY> HELLO EVERYBODY </BODY> </HTML> |
We must type .HTM or .HTML extension ourself otherwise the text editor will save it as.txt
Step -3 Click on File menu>Save. The Save As dialog box gets displayed. Select the appropriate drive/folder and type the file name with the extension .htm or.html in the file name box. Click on Save button to save the file.
Important Link